<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Login</title>
		<style>
			body {
				margin: 0;
				padding: 0;
				background: #fff;
			}
			.signup-form {
				width: 300px;
				padding: 20px;
				text-align: center;
				background: url('../images/bg.jpg');
				background-size: cover;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				overflow: hidden;
			}
			.signup-form h1 {
				margin-top: 100px;
				font-family: 'Permanent Marker', cursive;
				color: #fff;
				font-size: 40px;
			}
			.signup-form input {
				display: block;
				width: 100%;
				padding: 0 16px;
				height: 44px;
				text-align: center;
				box-sizing: border-box;
				outline: none;
				border: none;
				font-family: 'montserrat', sans-serif;
			}
			.txtb {
				margin: 20px 0;
				background: rgba(255, 255, 255, 0.5);
				border-radius: 6px;
			}
			.signup-btn {
				margin-top: 60px;
				margin-bottom: 20px;
				background: #487eb0;
				color: #fff;
				border-radius: 44px;
				cursor: pointer;
				transition: 0.8s;
			}
			.signup-btn:hover {
				transform: scale(0.96);
			}
			.signup-form a {
				text-decoration: none;
				color: #fff;
				font-family: 'montserrat', sans-serif;
				font-size: 14px;
				padding: 10px;
				transition: 0.8s;
				display: block;
			}
			.signup-form a:hover {
				background: rgba(0, 0, 0, 0.25);
			}
		</style>
	</head>
	<body>
		<div>
			<div class="signup-form">
				<h1>Sign Up</h1>
				<input type="text" placeholder="Full Name" class="txtb" />
				<input type="email" placeholder="Email" class="txtb" />
				<input type="password" placeholder="Password" class="txtb" />
				<input type="submit" value="Create Account" class="signup-btn" />
				<a href="#">Already Have One ?</a>
			</div>
		</div>
	</body>
</html>
